<template>
  <div class="adpp-detail-left-hot">
    <div class="content">
      <nuxt-link to='/' class="default btn">
        <div class="icon icon1">
          <img src="/hot.gif" alt="">
        </div>
        <div class="icon icon2">
          <img src="/hot_fill.png" alt="">
        </div>
        <p>招生政策</p>
      </nuxt-link>
      <nuxt-link to='/' class="default btn">
        <div class="icon icon1">
          <img src="/hot.gif" alt="">
        </div>
        <div class="icon icon2">
          <img src="/hot_fill.png" alt="">
        </div>
        <p>报考条件</p>
      </nuxt-link>
      <nuxt-link to='/' class="default btn">
        <div class="icon icon1">
          <img src="/hot.gif" alt="">
        </div>
        <div class="icon icon2">
          <img src="/hot_fill.png" alt="">
        </div>
        <p>热门院校</p>
      </nuxt-link>
      <nuxt-link to='/' class="default btn">
        <div class="icon icon1">
          <img src="/hot.gif" alt="">
        </div>
        <div class="icon icon2">
          <img src="/hot_fill.png" alt="">
        </div>
        <p>报考条件</p>
      </nuxt-link>

    </div>
  </div>
</template>

<script>
export default{
  components:{

  }
}
</script>

<style lang="scss" scoped="scoped">
.adpp-detail-left-hot{
  background-color: white;
  width: 150px;
  box-sizing: border-box;
  padding: 20px 0 10px 0;
  .btn{
    display: flex;
    align-items: center;
    width: 120px;
    height: 34px;
    box-sizing: border-box;
    border: 1px solid $active_color;
    margin: 0 auto;
    margin-bottom: 10px;
    padding-left: 10px;
    border-radius: 4px;
    transition: all 0.3s;
    .icon{
      width: 22px;
      &.icon2{
        display: none;
      }
    }
    p{
      transition: all 0.3s;
      margin-left: 5px;
      font-size: 16px;
      color: $active_color;

    }
    &:hover{
      background-color: $active_color;
      p{
        color: white;
      }
      .icon1{
        display: none;
      }
      .icon2{
        display: block;
      }
    }
  }
}

</style>
